<ui:composition template="/WEB-INF/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<ui:composition template="/templates/menu-template.xhtml">
		<ui:define name="title">
			<h:outputText value="#{msg.catalogoUsuarios}" />
		</ui:define>
		<ui:define name="content">
			<a4j:form id="form">
				<rich:panel>
					<f:facet name="header">
						<h:outputText value="#{msg.escogerAccion}" />
					</f:facet>
					<h:panelGrid columns="1">
						<a4j:keepAlive beanName="beanUserMobile" />
						<a4j:commandButton id="addNewUser" ajaxSingle="true"
							action="#{beanUserMobile.companies}"
							value="#{msg.agregarUsuario}">
							<rich:componentControl for="mpNewUser" attachTo="addNewUser"
								operation="show" event="onclick" />
						</a4j:commandButton>
					</h:panelGrid>
					<rich:spacer height="20px" />
					<rich:extendedDataTable value="#{beanUserMobile.listItems}"
						var="item" id="table" rows="10" reRender="datascroller"
						style="margin-left: auto; margin-right: auto; text-align: center;"
						width="100%">
						<rich:column id="userColumn" label="#{msg.user}" width="15%">
							<f:facet name="header">
								<h:outputText value="#{msg.user}" />
							</f:facet>
							<h:outputText value="#{item.user}" />
						</rich:column>
						<rich:column id="firstNameColumn" label="#{msg.firstName}"
							width="15%">
							<f:facet name="header">
								<h:outputText value="#{msg.firstName}" />
							</f:facet>
							<h:outputText value="#{item.firstName}" />
						</rich:column>
						<rich:column id="lastnameColumn" label="#{msg.lastname}"
							width="15%">
							<f:facet name="header">
								<h:outputText value="#{msg.lastname}" />
							</f:facet>
							<h:outputText value="#{item.lastName}" />
						</rich:column>
						<rich:column id="emailColumn" label="#{msg.email}" width="30%">
							<f:facet name="header">
								<h:outputText value="#{msg.email}" />
							</f:facet>
							<h:outputText value="#{item.email}" />
						</rich:column>
						<rich:column width="25%" id="acciones" label="#{msg.acciones}">
							<f:facet name="header">
								<h:outputText value="#{msg.acciones}" />
							</f:facet>
							<a4j:commandLink ajaxSingle="true" id="editUser">
								<h:graphicImage value="/static/images/edit.png"
									style="border: 0" />
								<f:setPropertyActionListener value="#{item}"
									target="#{beanUserMobile.currentItem}" />
								<rich:componentControl for="mpEditarUser" attachTo="editUser"
									operation="show" event="onclick" />
							</a4j:commandLink>
							<rich:toolTip for="editUser" value="#{msg.editar}" />
							<a4j:commandLink ajaxSingle="true" id="deleteUser">
								<h:graphicImage value="/static/images/delete.png"
									style="border: 0" />
								<f:setPropertyActionListener value="#{item}"
									target="#{beanUserMobile.currentItem}" />
								<rich:componentControl for="mpBorrarUser" attachTo="deleteUser"
									operation="show" event="onclick" />
							</a4j:commandLink>
							<rich:toolTip for="deleteUser" value="#{msg.borrar}" />
						</rich:column>
						<f:facet name="footer">
							<rich:datascroller id="datascroller" renderIfSinglePage="false" />
						</f:facet>
					</rich:extendedDataTable>
					<!-- Inicio Modal Panel Borrar -->
					<rich:modalPanel id="mpBorrarUser" height="110" width="250">
						<f:facet name="header">
							<h:outputText value="#{msg.borrar}" />
						</f:facet>
						<p>El usuario seleccionado será eliminado permanentemente del
							sistema.</p>
						<h:panelGrid columns="2" style="margin-left: auto;">
							<h:panelGroup>
								<a4j:commandButton id="continueDeleteUser"
									value="#{msg.continuar}" ajaxSingle="true"
									action="#{beanUserMobile.deleteUser}"
									onclick="Desactivar(this.id);"
									oncomplete="#{rich:component('mpBorrarUser')}.hide();"
									reRender="table" />
							</h:panelGroup>
							<h:panelGroup>
								<a4j:commandButton value="#{msg.cancelar}" id="btnCancelUser"
									onclick="#{rich:component('mpBorrarUser')}.hide();return false;" />
							</h:panelGroup>
						</h:panelGrid>
					</rich:modalPanel>
					<!-- Fin Modal Panel Borrar -->
				</rich:panel>
			</a4j:form>
			<!-- Inicio Modal Panel Agregar -->
			<rich:modalPanel id="mpNewUser" autosized="true" width="400">
				<f:facet name="header">
					<h:outputText value="#{msg.agregar}" />
				</f:facet>
				<f:facet name="controls">
					<h:panelGroup>
						<h:graphicImage value="/static/images/close.png"
							id="hideNewUserPanel" />
						<rich:componentControl for="mpNewUser" attachTo="hideNewUserPanel"
							operation="hide" event="onclick" />
					</h:panelGroup>
				</f:facet>
				<a4j:form>
					<a4j:outputPanel ajaxRendered="true">
						<h:panelGrid id="panelNewUser" columns="1" cellpadding="2">
							<rich:graphValidator value="#{beanUserMobile}">
								<h:panelGrid columns="3"
									style="margin-left: auto; margin-right: auto;">
									<h:outputText value="#{msg.user}" />
									<h:inputText value="#{beanUserMobile.newUser}"
										id="newUserInput" style="width: 150px;" maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newUserInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.firstName}" />
									<h:inputText id="newFirstnameInput"
										value="#{beanUserMobile.newFirstName}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newFirstnameInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.lastname}" />
									<h:inputText id="newLastnameInput"
										value="#{beanUserMobile.newLastName}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newLastnameInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.email}" />
									<h:inputText id="newEmailInput"
										value="#{beanUserMobile.newEmail}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newEmailInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.company}" />
									<h:selectOneMenu value="#{beanUserMobile.newTradename}"
										style="width: 155px;" id="newTradenameInput">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItems value="#{beanUserMobile.companyItems}" />
									</h:selectOneMenu>
									<rich:message for="newTradenameInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.city}" />
									<h:inputText id="newCountryInput"
										value="#{beanUserMobile.newCountry}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newCountryInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.state}" />
									<h:inputText id="newStateInput"
										value="#{beanUserMobile.newState}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newStateInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.address}" />
									<h:inputText id="newAddressInput"
										value="#{beanUserMobile.newAddress}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newAddressInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.zipCode}" />
									<h:inputText id="newZipCodeInput"
										value="#{beanUserMobile.newZipCode}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newZipCodeInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.telephone}" />
									<h:inputText id="newPhoneNumberInput"
										value="#{beanUserMobile.newPhoneNumber}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newPhoneNumberInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.cellphone}" />
									<h:inputText id="newMobilePhoneInput"
										value="#{beanUserMobile.newMobilephone}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newMobilePhoneInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.noEmpleado}" />
									<h:inputText id="newIdEmployee"
										value="#{beanUserMobile.newIdEmployee}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newIdEmployeeInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.rfc}" />
									<h:inputText id="newRfcInput" value="#{beanUserMobile.newRfc}"
										style="width: 150px;" />
									<rich:message for="newRfcInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.curp}" />
									<h:inputText id="newCurpInput"
										value="#{beanUserMobile.newCurp}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newCurpInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.age}" />
									<h:inputText id="newAgeInput" value="#{beanUserMobile.newAge}"
										style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newAgeInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.gender}" />
									<h:selectOneMenu value="#{beanUserMobile.newGender}"
										style="width: 155px;" id="newGenderInput">
										<f:selectItem itemLabel="Genero......." itemValue="-1" />
										<f:selectItem itemLabel="Femenino" itemValue="F" />
										<f:selectItem itemLabel="Masculino" itemValue="M" />
										<rich:ajaxValidator event="onblur" />
									</h:selectOneMenu>
									<rich:message for="newGenderInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.securityQuestion}" />
									<h:selectOneMenu id="newSecQuestInput"
										value="#{beanUserMobile.newSecurityQuestion}"
										style="width: 155px;">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItem itemLabel="Nombre de tu primer mascota"
											itemValue="Nombre de tu primer mascota" />
										<f:selectItem itemLabel="Ciudad donde naciste"
											itemValue="Ciudad donde naciste" />
										<f:selectItem itemLabel="Mejor amigo de la infancia"
											itemValue="Mejor amigo de la infancia" />
										<f:selectItem itemLabel="Personaje de ficción favorito"
											itemValue="Personaje de ficción favorito" />
										<f:selectItem itemLabel="Cantante favorito"
											itemValue="Cantante favorito" />
										<f:selectItem itemLabel="Persona que más admiras"
											itemValue="Persona que más admiras" />
									</h:selectOneMenu>
									<rich:message for="newSecQuestInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.answerQuestion}" />
									<h:inputSecret id="newAnswerQuestInput"
										value="#{beanUserMobile.newAnswerQuestion}"
										style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="newAnswerQuestInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.password}" />
									<h:inputSecret id="newPasswordInput"
										value="#{beanUserMobile.newPassword}" style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="newPasswordInput"
										style="font-size:10px;font-family:Arial;color:red;" />
									<h:outputText value="#{msg.repeatNewPassword}" />
									<h:inputSecret id="repeatNewPasswordInput"
										value="#{beanUserMobile.repeatNewPassword}"
										style="width: 150px;">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="repeatNewPasswordInput"
										style="font-size:10px;font-family:Arial;color:red;" />
								</h:panelGrid>
							</rich:graphValidator>
							<h:panelGrid columns="2">
								<a4j:commandButton value="#{msg.continuar}" id="continueAddUser"
									action="#{beanUserMobile.createUser}"
									oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpNewUser')}.hide();"
									reRender="table" />
								<a4j:commandButton value="#{msg.cancelar}" id="cancelAddUser"
									onclick="#{rich:component('mpNewUser')}.hide();return false;" />
							</h:panelGrid>
						</h:panelGrid>
					</a4j:outputPanel>
				</a4j:form>
			</rich:modalPanel>
			<!-- Fin Modal Panel Agregar -->
			<!-- Inicio Modal Panel Editar -->
			<rich:modalPanel id="mpEditarUser" autosized="true" width="360">
				<f:facet name="header">
					<h:outputText value="#{msg.editar}" />
				</f:facet>
				<f:facet name="controls">
					<h:panelGroup>
						<h:graphicImage value="/static/images/close.png" id="hidelink" />
						<rich:componentControl for="mpEditarUser" attachTo="hidelink"
							operation="hide" event="onclick" />
					</h:panelGroup>
				</f:facet>
				<a4j:form>
					<a4j:outputPanel ajaxRendered="true">
						<h:panelGrid id="panelUpdateUser" columns="1" cellpadding="4">
							<h:panelGroup id="updateMessagePanel" layout="block" />
							<a4j:outputPanel ajaxRendered="true">
								<rich:graphValidator value="#{beanUserMobile}">
									<h:panelGrid columns="3"
										style="margin-left: auto; margin-right: auto;">
										<h:outputText value="#{msg.user}" />
										<h:outputText value="#{beanUserMobile.user}"
											id="editUserInput" style="width: 150px;" />
										<h:outputText value="" />
										<h:outputText value="#{msg.firstName}" />
										<h:inputText value="#{beanUserMobile.firstName}"
											id="editFirstNameInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editFirstNameInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.lastname}" />
										<h:inputText value="#{beanUserMobile.lastName}"
											id="editLastNameInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editLastNameInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.email}" />
										<h:inputText value="#{beanUserMobile.email}"
											id="editEmailInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editEmailInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.city}" />
										<h:inputText value="#{beanUserMobile.country}"
											id="editCountryInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editCountryInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.state}" />
										<h:inputText value="#{beanUserMobile.state}"
											id="editStateInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editStateInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.address}" />
										<h:inputText value="#{beanUserMobile.address}"
											id="editAddressInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editAddressInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.zipCode}" />
										<h:inputText value="#{beanUserMobile.zipCode}"
											id="editZipCodeInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editZipCodeInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.telephone}" />
										<h:inputText value="#{beanUserMobile.phoneNumber}"
											id="editPhoneNumberInput" style="width: 150px;"
											maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editPhoneNumberInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.cellphone}" />
										<h:inputText value="#{beanUserMobile.mobilephone}"
											id="editMobilePhoneInput" style="width: 150px;"
											maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editMobilePhoneInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.noEmpleado}" />
										<h:inputText value="#{beanUserMobile.idEmployee}"
											id="editIdEmployeeInput" style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editIdEmployeeInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.rfc}" />
										<h:inputText value="#{beanUserMobile.rfc}" id="editRfcInput"
											style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editRfcInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.curp}" required="true"
											maxlength="30" />
										<h:inputText value="#{beanUserMobile.curp}" id="editCurpInput"
											style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editCurpInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.age}" />
										<h:inputText value="#{beanUserMobile.age}" id="editAgeInput"
											style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputText>
										<rich:message for="editAgeInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.gender}" />
										<h:selectOneMenu value="#{beanUserMobile.gender}"
											style="width: 155px;" id="editGenderInput">
											<f:selectItem itemLabel="Genero......." itemValue="-1" />
											<f:selectItem itemLabel="Femenino" itemValue="F" />
											<f:selectItem itemLabel="Masculino" itemValue="M" />
											<rich:ajaxValidator event="onblur" />
										</h:selectOneMenu>
										<rich:message for="editGenderInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.active}" />
										<h:selectOneMenu value="#{beanUserMobile.isActive}"
											style="width: 155px;" maxlength="1" id="editIsActiveInput">
											<f:selectItem itemLabel="Estado......." itemValue="-1" />
											<f:selectItem itemLabel="Activo" itemValue="1" />
											<f:selectItem itemLabel="Inactivo" itemValue="0" />
										</h:selectOneMenu>
										<rich:message for="editIsActiveInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.password}" />
										<h:inputSecret id="editPasswordInput"
											value="#{beanUserMobile.password}" style="width: 150px;"
											maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputSecret>
										<rich:message for="editPasswordInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.newPassword}" />
										<h:inputSecret id="editPasswordChangedInput"
											value="#{beanUserMobile.passwordChanged}"
											style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputSecret>
										<rich:message for="editPasswordChangedInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.repeatNewPassword}" />
										<h:inputSecret id="editRepeatPasswordInput"
											value="#{beanUserMobile.repeatPassword}"
											style="width: 150px;" maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputSecret>
										<rich:message for="editRepeatPasswordInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.securityQuestion}" />
										<h:selectOneMenu value="#{beanUserMobile.securityQuestion}"
											style="width: 155px;" id="editSecQuestInput">
											<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
											<f:selectItem itemLabel="Nombre de tu primer mascota"
												itemValue="Nombre de tu primer mascota" />
											<f:selectItem itemLabel="Ciudad donde naciste"
												itemValue="Ciudad donde naciste" />
											<f:selectItem itemLabel="Mejor amigo de la infancia"
												itemValue="Mejor amigo de la infancia" />
											<f:selectItem itemLabel="Personaje de ficción favorito"
												itemValue="Personaje de ficción favorito" />
											<f:selectItem itemLabel="Cantante favorito"
												itemValue="Cantante favorito" />
											<f:selectItem itemLabel="Persona que más admiras"
												itemValue="Persona que más admiras" />
										</h:selectOneMenu>
										<rich:message for="editSecQuestInput"
											style="font-size:10px;font-family:Arial;color:red;" />
										<h:outputText value="#{msg.answerQuestion}" />
										<h:inputSecret value="#{beanUserMobile.answerQuestion}"
											id="editAnswerQuestInput" style="width: 150px;"
											maxlength="20">
											<rich:ajaxValidator event="onblur" />
										</h:inputSecret>
										<rich:message for="editAnswerQuestInput"
											style="font-size:10px;font-family:Arial;color:red;" />
									</h:panelGrid>
								</rich:graphValidator>
							</a4j:outputPanel>
							<h:panelGrid columns="2">
								<a4j:commandButton value="#{msg.aceptar}" id="updateUser"
									action="#{beanUserMobile.updateUser}" ajaxSingle="true"
									oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpEditarUser')}.hide();"
									onclick="Desactivar(updateUser);" reRender="table" />
								<a4j:commandButton value="#{msg.cancelar}" id="cancelUpdateUser"
									onclick="#{rich:component('mpEditarUser')}.hide();return false;" />
							</h:panelGrid>
						</h:panelGrid>
					</a4j:outputPanel>
				</a4j:form>
			</rich:modalPanel>
			<!-- Fin Modal Panel Editar -->
		</ui:define>
	</ui:composition>
</ui:composition>
